<template>
  <div class="hk-left-one">
    <div class="box-sm">
      <dv-border-box-12> <div class="hk-left-one-box"> <Left-One/> </div> </dv-border-box-12> 
    </div>
    <div class="box-sm">
      <dv-border-box-12> <div class="hk-left-one-box"> <Left-Two/> </div> </dv-border-box-12> 
    </div>
    <div class="box-sm">
      <dv-border-box-12> <div class="hk-left-one-box"> <Left-Three/> </div> </dv-border-box-12> 
    </div>
    <div class="box-sm">
      <dv-border-box-12> <div class="hk-left-one-box"> <Left-Four/> </div> </dv-border-box-12> 
    </div>
  </div>
</template>

<script>

import LeftOne from "./left/one.vue"
import LeftTwo from "./left/two.vue"
import LeftThree from "./left/three.vue"
import LeftFour from "./left/four.vue"

export default {
  name: "leftBox",
  components: {
    LeftOne,
    LeftTwo,
    LeftThree,
    LeftFour
  },
  data() {
    return {

    }
  },
  mounted() {

  }
}
</script>

<style lang="less">
  .hk-left-one {
    .box-sm{
        width: 50%;
        display: inline-block;
    }
    .hk-left-one-box{
        height: 340px;
    }
}
</style>